The Photoshop Guru's Handbook - "Creating the NUI" Part 3 - 2D & 3D (inDepth Interface project) Texture Mapping - adding/covering the interface with a texture pattern. Part 2 Mapping your Texture: The best, and simplest way to map a texture to a 3D object in Photoshop is to use the layer Blend modes. Each mode has it's own characteristics, and each mode has it's strengths and weaknesses. Here is a quick list of blend modes that will produce 'normal' and 'unnatural' results: (consult Photoshop's help files for more info on these modes) The Blending Modes: a brief description for our purposes here.
Overlay mode will allow your texture to take on the exact same light and shadow properties that the interface has, thus making it seem as if the interface object is actually made from the texture material. Overlay and Hardlight modes can produce very glossy, solid surface qualities on your texture; provided your interface has those qualities already. If you'd like less gloss, but want to maintain the interface's highlight and shadow properties, just switch the Blend mode to either Softlight or Multiply; depending on how much of a 'matted' look you want. Multiply mode produces a darker matte look, and Softlight is more subtle. And that's all there is to it folks! Go ahead an experiment with some textures you like using. If you like creating your textures by hand from scratch, then do so. But here's a tip; photos of textures can produce some of the better results. And some of the more common textures to use for 'psuedo' realistic texture mapping are wood, concrete, marble, sand, leather, paper, various cloths, various metals, and on and on. You get the idea right? The better the photo's quality, the easier it will be to get good results. GURU ADVICE: If you really want to master Photoshop and make it bow to your creative prowess (ooo big words huh! hehehe), don't become too overly dependant on all the filters it has, while you're in the beginning stages of learning the program. That will only have an adverse effect on how versitile you can become with it. Just to show you a small example of what i mean by this, have a look at this version of the interface we just went through creating: ![]() - No Lighting Filter Used For This - Another way to create 3D-like effects is to not create them using the Lighting filter. The Lighting filter is a great and powerful tool yes, but it also has it's weaknesses. The first of which is - it makes you lazy toward experimenting and getting to know what all the tools can actually do for you, if you give them a fair chance. Another one being that you have way more control over your creations if you do them by hand, from scratch, using only the tools in the Tool palette. And that's how i created the interface sample above. I used all of the steps laid out in the previous pages, but used no Lighting filter, and no special effects. In fact, everything for that interface was created without the aid of any major filters. The only ones i used were the Blur & the Emboss filters. And i didn't even have to use the Blur filter either... i could have very easily used the Blur 'Tool' instead. Do you get what i mean by all this? I realize that the above interface is not an award-winning design by any means... but that wasn't my intent when i created it. I created it just to show you that you *don't* have to rely on special filters all the time. So instead, you can just use a flat 2D shape filled with a colour or texture, and some separate layers laid on top of that one to create your highlights and shadows that will produce a 3 dimensional effect on the 2D shape. I use this method much more often than i do the Lighting filter; because i like the control it gives me. When using this method however, you'll need to put your texture layers *below* your highlight and shadow layers. And in case you're wondering... highlight & shadow layers are nothing more than layers that contain white and black, and are set to a Blend mode that allows them to blend into the underlying layers containing the coloured or textured shapes. Try creating something with this method also, just to get an idea of what's involved with it. It doesn't have to be anything special, even just creating a simple button will help you understand this approach. And if you need a short example of how to apply this method, just review the 'Interface Exercise' in Part 2 - "Nuts & Boltz" of this navDesign series. It can only make you better, right? :?)=) If anything in this section has caused you to become confused or lost, just be patient. If this is all new to you, that's bound to happen. Just restart at the top and go through the steps again, taking careful note of what's being done in each step. It'll all sink in very shortly. And don't forget, you can download this whole section from the front page of this series. If you'd care to do that now, go here. Buttons / Texture Mapping / Adding Text > To the Top < > Back to "2D & 3D" < - Page 5b - |
"The Photoshop Guru's Handbook" ™ and all contents of this site are copyright 96/00 Mark Anthony Larmand - (aka theKeeper) all rights reserved. |